Web developers will often have a preferred Internet browser. Naturally, that same browser is the one used to preview websites and web applications in development. There are, however, a multitude of browsers (and many versions of those browsers), resulting in a variety of experiences for users. This creates a problem for developers: how can we ensure that a website is compatible across as many browsers as possible?
In this article, you'll learn about the varying, default CSS rules that different browsers apply to HTML, how to reset default browser CSS, and how to increase browser compatibility for websites.
When building a website, you've probably noticed that heading elements like h1 are always a default size (and font) or that hyperlinks always appear blue and underlined, all before you add your own styles. Why is that so? And how does that happen?
All browsers have a default set of CSS rules that they apply to HTML. The default CSS rules live in a stylesheet specific to the browser. The stylesheet is known as a user agent style sheet.
If you were to view the same website across many different web browsers, you might notice that the website looks different in each browser. This is because each browser has its own user agent stylesheet. This variance in user agent style sheets is what makes it difficult to create a website that is consistent across all browsers.
Designing a website across browsers with different user agent stylesheets can be a frustrating experience. To avoid this problem, it's very common to reset the user agent stylesheets using a CSS reset stylesheet (often shortened to "CSS reset").
CSS resets remove all browser-added styling to make sure that all content starts at the same starting point for developers. Using a CSS reset stylesheet can be accomplished using the following steps:
<html>
<head>
<title>My Title</title>
<link href="reset.css" type="text/css" rel="stylesheet">
<link href="styles.css" type="text/css" rel="stylesheet">
</head>
The example above demonstrates a reset.css stylesheet linked in an HTML file.
A popular CSS reset can be found here.
When new browsers are developed (or an existing browser is updated), they often include new features that weren't previously available. The result, however, is a multitude of browsers with varying functionalities.
To avoid inconsistencies across browsers when creating a website, developers must ensure that newer HTML or CSS features are supported in each browser. The following resource is an up-to-date record of CSS properties across many versions of many browsers:
For example, if you search "Can I use" for the CSS property filter (a property that can add a visual effect to an image), you'll see that it is supported in most browsers, except for Internet Explorer 11 and Opera Mini.
When a feature is searched using the resource above, the search results include a support matrix. The support matrix outlines which browsers (and browser versions) support the feature. The bottom of the pane also includes information about known issues and bugs.
In the top-right corner of "Can I use", there is information on "global support" and "unprefixed support". What do these terms mean and what is the difference between them?
As stated earlier, every browser has its own implementation of many newer CSS rules. To distinguish their own implementation, browsers add a prefix to the CSS property. The prefix is known as a vendor prefix. For example, the -moz vendor prefix refers to Mozilla Firefox's implementation. A full list of vendor prefixes can be found here.
The following code demonstrates how the transition property is implemented across all browsers using vendor prefixes.
h1 {
transition: all 4s ease;
transition: all 4s ease;
transition: all 4s ease;
transition: all 4s ease;
transition: all 4s ease;
}
To identify exactly which CSS properties need vendor prefixes, you can use tools like this one to generate all of the necessary vendor prefixes for you.
Even with vendor prefixes, what if a user is using a browser that doesn’t support newer browser functionalities? Developers have created libraries called polyfills to support such users.
Polyfills:
The collected information allows you to write alternative CSS for browsers that are missing certain features. Your website may not look as visually appealing as it would on a newer browser, but it will function.
One example of a polyfill is Modernizr. To use Modernizr:
+ next to any features you want to polyfill.<source> tag in your index.html file..feature-name. To target elements that don't have the detected feature use .no-feature-name. The code feature-name is intended to represent the actual CSS feature.An example of alternative CSS rules from the Modernizr documentation:
/* Use this rule if the user's browser doesn't support gradients */
.no-cssgradients .header {
background: url("images/glossybutton.png");
}
/* Use this rule if the user's browser does support gradients */
.cssgradients .header {
background-image: linear-gradient(cornflowerblue, rebeccapurple);
}
Let's review what you've learned about browser compatibility.
Users have the option of selecting from a multitude of browsers and browser versions. Because of this, it's important to create websites that are compatible across a wide array of browsers. Increasing your website's browser compatibility is not only good practice, it also increases your website's accessibility to the potential billions of users around the globe.